<!--  -->
<template>
  <div id="app">
      <div class="header">
          <h1>商城后台管理系统</h1>
          <span>X  退出</span>
      </div>
      <div class="connent">
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgb(57,61,73)"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      >
    <el-menu-item index="0">{{list[0].name}}</el-menu-item>
      <el-submenu :index="i.toString()" v-for="(item,i) in list[1]" :key='i'>
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item :index='i+"-"+j' v-for="(word,j) in item.path"  :key='j' @click='go(word.path)'>{{word.text}}</el-menu-item>
      </el-submenu>
    <el-menu-item index="6">{{list[2].name}}</el-menu-item>
      
    </el-menu>
    <router-view></router-view>
      </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  data() {
    //这里存放数据
    return {
      list:[
          {name:'工作台',path:routes[0]},
          [
              {name:'商品',path:[routes[1],routes[2],routes[3]]},
              {name:'订单',path:[routes[4]]},
              {name:'运营',path:[routes[5],routes[6]]},
              {name:'用户',path:[routes[7]]},
              {name:'设置',path:[routes[8],routes[9],routes[10]]},
          ],
              {name:'登录',path:[routes[11]]},
      ],
      index:0
    };
  },
  methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      go(path){
          this.$router.push({
              path:path
          })
      }
  },
  mounted(){
  }
};
</script>
<style>
    @import url(./css/reset.css);
    #app{
        width: 100%;
        height: 100%;
    }
    .header{
        display: flex;
        height: 60px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        flex: 0;
    }
    .header h1{
        font-size: 23px;
        margin-left: 20px;
        font-weight: bold;

    }
    .header span{
        font-size: 16px;
        margin-right: 20px;
        cursor: pointer;
        color: #ccc;
    }
    .connent{
        display: flex;
        height: calc(100% - 60px);      
        flex: 1 1;  
    }
    .el-menu-vertical-demo{
        width: 200px;
    }
</style>